<!-- 采购订单 -->
<template>
	<view class="">
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
		<view class="list-view">
			<u-scroll-list :indicator="false" class="p-b-0">
				<view class="top-view p-t-20">
					<view class="flex flex-sa f-35 m-b-10">
						<view class="f-35">
							<view class="flex flex-c f-32 text-color"> 总订货 </view>
							<view class="flex flex-c f-30 m-b-10"> {{totalObj.currentPiecesCount||0}} </view>
						</view>
						<view class="f-35">
							<view class="flex flex-c f-32 text-color"> 总来货 </view>
							<view class="flex flex-c f-30 m-b-10"> {{totalObj.waitQuantityOut||0}} </view>
						</view>
						<view class="f-35">
							<view class="flex flex-c f-32 text-color"> 总未来 </view>
							<view class="flex flex-c f-30 m-b-10"> {{totalObj.waitQuantityOut||0}} </view>
						</view>
					</view>
				</view>
			</u-scroll-list>
			<u-sticky offset-top="0">
				<view class="flex flex-sa nav-view">
					<view class="flex flex-c f-28" style="flex: 1;">
						<view class="flex" v-if="params.data.colorNumber">
							<text class="m-r-10" style="color: #60b4f6;">{{params.data.colorNumber}}</text>
							<u-icon name="close" color="#60b4f6" size="10"></u-icon>
						</view>
						<view class="flex" v-else>
							<text class="m-r-10">07-28今日</text>
							<u-icon name="arrow-down-fill" color="#bbb" size="10"></u-icon>
						</view>
					</view>
					<view class="flex flex-c f-28" style="flex: 1;">
						<view class="flex" v-if="params.data.storeName">
							<text class="m-r-10" style="color: #60b4f6;">{{params.data.storeName}}</text>
							<u-icon name="close" color="#60b4f6" size="10"></u-icon>
						</view>
						<view class="flex" v-else>
							<text class="m-r-10" >选产品</text>
							<u-icon name="arrow-down-fill" color="#bbb" size="10"></u-icon>
						</view>
					</view>
					<view class="flex flex-c f-28" style="flex: 1;">
						<view class="flex" v-if="params.data.name">
							<text class="m-r-10" style="color: #60b4f6;">{{params.data.code}} {{params.data.name}}</text>
							<u-icon name="arrow-down-fill" color="#60b4f6" size="10"></u-icon>
						</view>
						<view v-else class="flex">
							<text class="m-r-10">选供应商</text>
							<u-icon name="arrow-down-fill" color="#bbb" size="10"></u-icon>
						</view>
					</view>
				</view>
				
			</u-sticky>
			<scroll-view scroll-y refresher-enabled show-scrollbar :refresher-triggered="triggered"
			             @refresherrefresh="$u.throttle(onRefresherrefresh, 200)" @scrolltolower='$u.throttle(onScrolltolower,1000)'
			             :style="{height: `${screenHeight}px`, backgroundColor: '#fff'}">
			
			  <view v-if="listData.length === 0" :style="{paddingTop: `${screenHeight / 4}px`}">
			    <u-empty mode="list" text="暂无数据">
					<u-button class="empty-button" text="新增参数" type="primary" shape="circle" color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))" @click="clickBtn({key: 'btn1'})"></u-button>
					<view class="tip-view">
						可点击右上角：+进行快速建档案
					</view>
				</u-empty>
			  </view>
			
			  <u-cell  v-for="item in listData" :key="item.id" :title="item.name" @click="itemProductClick(item)">
			    <view slot="icon" class="list-item-avatar">
			      <u-avatar
			          fontSize="18"
			          randomBgColor
			          :text="item.name[item.name.length - 1]"
			      ></u-avatar>
			    </view>
			    <view slot="right-icon" class="list-item-text">
			      <text class="label">累次</text>
			      <text class="amount" :class="{'is-green': item.amountDeb > 0}">{{ item.amountDebt }}</text>
			    </view>
			  </u-cell>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import {
	  listPage
	} from '@/apis/inventory/converter'
	export default {
		name: '',
		data() {
			return {
				config: {
				  title: "采购订单",
				  color: "#ffffff",
				  //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				  backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				  rightButton: [
				    {
				      key: "btn1",
				      icon: "&#xe888;",
				      position: "left",
				    },
				  ],
				},
				show: false,
				totalObj: {
					
				},
				params: {
					data: {},
				},
				// 列表数据
				pageLoading: false,
				triggered: false,
				screenHeight: 0,
				listData: [],
			}
		},
		methods: {
			clickBtn(item) {
				if (item.key === "btn1") {
					this.show = true
				}
			},
			// 获取列表数据
			getListPage() {
			  uni.showLoading({
			    title: "加载中"
			  })
			  listPage(this.params).then(res => {
			    if (!res.data.flag) return
			    const records = res.data.data.records || []
			    this.listData.push(...records)
			  }).finally(_ => {
			    this.triggered = false
			    this.pageLoading = false
			    uni.hideLoading()
			  })
			},
			// 下拉刷新
			onRefresherrefresh() {
			  this.triggered = true
			  this.listData = []
			  this.listPage()
			},
			// 滚动加载
			onScrolltolower() {},
			// 选择当前条数据
			itemProductClick(val) {
			  // uni.navigateTo({
			  //   url: `pages/application/pages/cloth/customer-product/index?id=${id}`
			  // })
			},
		},
		mounted() {
			const height = this.$refs.hxnb.$el.offsetHeight + (this.$refs.tabBarSearch.$el.offsetHeight);
			const sysInfo = uni.getSystemInfoSync()
			this.screenHeight = sysInfo.windowHeight - height
		}
	}
</script>

<style lang="scss" scoped>
	.list-view {
		position: relative;
		z-index: 0;
	}
	.ellipsis {
		width: 144rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.top-view {
		flex: 1;
		background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
		color: #fff;
	}
	.nav-view {
		background-color: #fff;
		height: 80rpx;
		color: #999;
		.inp-view {
			flex: 1;
			text-align: center;
			color: #333;
		}
	}
	.empty-button {
		width: 660rpx;
		margin-top: 20rpx;
	}
	.tip-view {
		text-align: center;
		font-size: 24rpx;
		color: #bbb;
		padding-top: 20rpx;
	}
</style>